<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画效果</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $("img").click(function () {
                // $(this).animate({"left":"1800px"},2000)
                // .animate({"top":"800px"},1000)
                // .animate({"left":"0px"},2000)
                // .animate({"top":"0px"},1000);

                $(this).animate({"left": "1800px"}, 1000)
                    .animate({"left": "900px", "top": "800px"}, 1000)
                    .animate({"left": "0px", "top": "0px"}, 1000);
                // 在使用事件句柄的时候,如果传递一个函数参数表示当事件触发之后执行的事情
                // 如果不传递任何参数,表示触发该句柄
                $(this).click();
            });
        })
    </script>
</head>
<body>
<img src="../images/heihei.gif" alt="图片加载失败" style="position: relative;left: 0px;top: 0px;">
</body>
</html>